<template>
  <div class="patient-main-content">
    <!-- 顶部选项卡 -->
    <div class="tab-navigation">
      <button :class="{ active: activeTab === 'western' }" @click="emitTabChange('western')">西医诊断</button>
      <button :class="{ active: activeTab === 'traditional' }" @click="emitTabChange('traditional')">中医诊断</button>
      <button :class="{ active: activeTab === 'treatment' }" @click="emitTabChange('treatment')">治疗方案</button>
      <button :class="{ active: activeTab === 'records' }" @click="emitTabChange('records')">就诊记录</button>
    </div>

    <!-- 内容区域，根据 activeTab 显示不同内容 -->
    <div class="tab-content">
      <div v-if="activeTab === 'western'" class="content-section">
        <h2>西医诊断</h2>
        <p><strong>主诉:</strong> {{ diagnosisData.western.complaint }}</p>
        <p><strong>诊断:</strong> {{ diagnosisData.western.diagnosis.join(', ') }}</p>
        <p><strong>症状:</strong> {{ diagnosisData.western.symptoms.join(', ') }}</p>
        <h3>检查结果:</h3>
        <ul>
          <li v-for="(item, index) in diagnosisData.western.testResults" :key="index">
            {{ item.name }}: {{ item.result }} ({{ item.status === 'normal' ? '正常' : '异常' }})
          </li>
        </ul>
        <p class="update-time">更新时间: {{ diagnosisData.western.updateTime }}</p>
      </div>

      <div v-if="activeTab === 'traditional'" class="content-section">
        <h2>中医诊断</h2>
        <p><strong>证型:</strong> {{ diagnosisData.traditional.syndrome }}</p>
        <p><strong>体质:</strong> {{ diagnosisData.traditional.constitution }}</p>
        <h3>四诊信息:</h3>
        <ul>
          <li>望诊: {{ diagnosisData.traditional.inspection.look }}</li>
          <li>闻诊: {{ diagnosisData.traditional.inspection.listen }}</li>
          <li>问诊: {{ diagnosisData.traditional.inspection.ask }}</li>
          <li>切诊: {{ diagnosisData.traditional.inspection.feel }}</li>
        </ul>
        <p><strong>归经:</strong> {{ diagnosisData.traditional.meridian.join(', ') }}</p>
        <p class="update-time">更新时间: {{ diagnosisData.traditional.updateTime }}</p>
      </div>

      <div v-if="activeTab === 'treatment'" class="content-section">
        <h2>治疗方案</h2>
        <h3>西医治疗:</h3>
        <h4>药物:</h4>
        <ul>
          <li v-for="(med, index) in diagnosisData.treatment.western.medications" :key="index">
            {{ med.name }} ({{ med.dosage }}, {{ med.duration }})
          </li>
        </ul>
        <h4>操作:</h4>
        <ul>
          <li v-for="(proc, index) in diagnosisData.treatment.western.procedures" :key="index">
            {{ proc }}
          </li>
        </ul>

        <h3>中医治疗:</h3>
        <p><strong>方剂:</strong> {{ diagnosisData.treatment.traditional.formula }}</p>
        <h4>中药:</h4>
        <ul>
          <li v-for="(herb, index) in diagnosisData.treatment.traditional.herbs" :key="index">
            {{ herb.name }} ({{ herb.dosage }})
          </li>
        </ul>
        <h4>针灸:</h4>
        <ul>
          <li v-for="(acu, index) in diagnosisData.treatment.traditional.acupuncture" :key="index">
            {{ acu }}
          </li>
        </ul>
        <p><strong>生活方式建议:</strong> {{ diagnosisData.treatment.traditional.lifestyle.join(', ') }}</p>
      </div>

      <div v-if="activeTab === 'records'" class="content-section">
        <h2>就诊记录</h2>
        <ul class="record-list">
          <li v-for="record in diagnosisData.records" :key="record.id" class="record-item">
            <p><strong>日期:</strong> {{ new Date(record.date).toLocaleString() }}</p>
            <p><strong>类型:</strong> {{ record.type }}</p>
            <p><strong>医生:</strong> {{ record.doctor }}</p>
            <p><strong>内容:</strong> {{ record.content }}</p>
            <p><strong>分类:</strong> {{ record.category === 'western' ? '西医' : '中医' }}</p>
            <p><strong>状态:</strong> {{ record.status === 'completed' ? '已完成' : '进行中' }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  patientInfo: {
    type: Object,
    required: true
  },
  activeTab: {
    type: String,
    required: true
  },
  diagnosisData: {
    type: Object,
    required: true
  }
});

const emits = defineEmits(['tab-change']);

const emitTabChange = (tabName) => {
  emits('tab-change', tabName);
};
</script>

<style scoped>
.patient-main-content {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tab-navigation {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.tab-navigation button {
  background-color: transparent;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: #555;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.tab-navigation button:hover {
  color: #42b983;
}

.tab-navigation button.active {
  color: #42b983;
  border-bottom-color: #42b983;
}

.content-section {
  padding: 20px 0;
}

.content-section h2 {
  color: #2c3e50;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.content-section h3 {
  color: #34495e;
  margin-top: 20px;
  margin-bottom: 10px;
}

.content-section h4 {
  color: #34495e;
  margin-top: 15px;
  margin-bottom: 8px;
}

.content-section p {
  margin-bottom: 8px;
  line-height: 1.6;
}

.content-section ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 10px;
}

.content-section ul li {
  background-color: #f9f9f9;
  border-left: 4px solid #42b983;
  margin-bottom: 5px;
  padding: 8px 12px;
  border-radius: 4px;
}

.update-time {
  font-size: 0.9em;
  color: #888;
  margin-top: 15px;
  text-align: right;
}

.record-list {
  list-style: none;
  padding: 0;
}

.record-item {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.record-item p {
  margin-bottom: 5px;
}

.record-item p strong {
  color: #333;
}
</style>
